<template>
  <view class="top-navigation">
    <!-- 左侧：返回按钮 + 上一层页面 -->
    <view class="nav-left" @click="goBack">
      <image class="return-icon" src="/static/return.png" mode="aspectFit"></image>
      <text class="back-text">{{ backText }}</text>
    </view>

    <!-- 右侧：当前页面标题 -->
    <view class="nav-right">
      <text class="page-title">{{ title }}</text>
      <text class="page-title-sub">{{ titleSub }}</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue'

/**
 * 顶部导航组件
 * @property {String} title - 当前页面标题
 * @property {String} backText - 返回文字，默认为"上一层页面"
 * @property {String} titleSub - 当前页面副标题，默认为空
 * @property {Function} onBack - 自定义返回回调函数（可选）
 */
const props = defineProps({
  // 页面标题
  title: {
    type: String,
    default: '页面标题'
  },
  // 返回按钮文字
  backText: {
    type: String,
    default: '上一层页面'
  },
  // 当前页面副标题
  titleSub: {
    type: String,
    default: ''
  },
  // 自定义返回回调
  onBack: {
    type: Function,
    default: null
  }
})

// 返回上一页
const goBack = () => {
  if (props.onBack && typeof props.onBack === 'function') {
    // 如果提供了自定义返回函数，使用它
    props.onBack()
  } else {
    // 默认返回上一页
    uni.navigateBack({
      delta: 1
    })
  }
}
</script>

<style lang="scss" scoped>
.top-navigation {
  height: 55rpx;
  // background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12rpx;
}

// 左侧返回区域
.nav-left {
  display: flex;
  align-items: center;
  gap: 8rpx;
  cursor: pointer;
  transition: opacity 0.3s ease;

  &:active {
    opacity: 0.7;
  }

  .return-icon {
    width: 32rpx;
    height: 32rpx;
    flex-shrink: 0;
  }

  .back-text {
    font-size: 16rpx;
    color: #384A58;
    font-weight: bold;
  }
}

// 右侧标题区域
.nav-right {
  // flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;

  .page-title {
    font-size: 16rpx;
    font-weight: bold;
    color: #333;
    max-width: 400rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-title-sub{
    font-size: 12rpx;
    color: #6f6f6f;
  }
}

/* 小程序平台兼容 */
/* #ifdef MP */
.top-navigation {
  background: rgba(255, 255, 255, 0.98);
}
/* #endif */

/* H5 平台优化 */
/* #ifdef H5 */
.nav-left:hover {
  opacity: 0.8;
}
/* #endif */
</style>

